<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改身份证照片</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="/Public/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <style type="text/css">


        a {
            text-decoration: none;
        }
        .col-sm-3 {

            display: inline-flex;
            position:relative;
            text-align: center;
            padding: 15px;
            border: 1px dashed #CFCFCF;

        }

        .photo {
            text-align: center;
            margin: 8px;
            width: 200px;
            height: 200px;
            box-shadow:2px 2px 5px 2px #c3c3c3 ;
        }

        .btn {
            border: 1px solid #6254B2;
            background-color: #6254B2;
            color: white;
            padding: 5px;
            border-radius: 5px;
            text-decoration: none;
        }

        .btn_color{
            border: 1px solid #008800;
            background-color: #008800;
        }

        a.btn:hover{
            background-color:#317DE6;
        }

        a.btn input{
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
        }

       label.btn input{
            position: absolute;
           right: 0;
           top: 0;
           opacity: 0;
           filter: alpha(opacity=0);
           cursor: pointer;
        }
        input[type="file"] {
            align-items: baseline;
            color: inherit;
            text-align: start;
        }
       .btn_style{
           display: block ;
            width: 100px;
           padding: 5px;
           margin: 20px;
           height: 30px;
           text-align: center;
       }

        .image_style{
            display: block;
            text-align: center;
             width: 210px;
            height: 210px;
        }
    </style>
</head>
<body class="bg">
<div class="col-sm-3">
    <div class="">
        <div>
            <div class="product_img image_style" id="img">
                <img src="/Public/admin/img/webuploader.png" class="photo">
            </div>
        </div>
        <div class="m-t-md">

            <label class="btn">第一张 <input  type="file" name="uploadimg" id="one_img" onchange="upload_one()"> </label>
        </div>
    </div>
    <div class="">
        <div>
            <div class="product_img image_style" id="img2">
                <img src="/Public/admin/img/webuploader.png" class="photo">
            </div>
        </div>
        <div class="m-t-md">

            <label class="btn">第二张   <input  type="file" name="uploadimg" id="two" onchange="upload_two()"> </label>
        </div>
    </div>

    <div class="">
        <div>
            <div class="product_img image_style" id="img3">
                <img src="/Public/admin/img/webuploader.png" class="photo">
            </div>
        </div>
        <div class="m-t-md">
            <label class="btn">第三张 <input  type="file" name="uploadimg" id="three" onchange="upload_thr()"> </label>
        </div>
    </div>

    <a href="javascript:;" onclick="update_photo()" class="btn btn_color btn_style">确定修改</a>


</div>

<script src="/Public/js/jquery.min.js?v=2.1.4"></script>
<script src="/Public/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/Public/js/content.js?v=1.0.0"></script>
<script src="/Public/admin/js/plugins/jquery.colorbox-min.js"></script>
<script src="/Public/admin/js/ajaxfileupload.js"></script>
<script src="/Public/admin/js/plugins/layer/layer.min.js"></script>
<script>
    var vid="<{$vid}>";
    console.log('9999',vid);
    var one_pic='';
    var two_pic='';
    var thr_pic='';

    //上传正面图图片
    function upload_one() {
        one_pic='';
        var tourl = '<{$SRVER_NAME}>/admin.php/Knowledge/uploadimg';
        $.ajaxFileUpload({
            url: tourl,//需要链接到服务器地址
            secureuri: false,
            fileElementId: 'one_img',//文件选择框的id属性file的id
            dataType: 'json',
            success: function (data) {
                if (data.code == '1001') {
                    one_pic=data.result;
                    $('#img').empty();
                        var html = '<img  style="width:150px" src="' + one_pic + '" />';
                        $('#img').append(html);

                } else {
                    if (data.status == '0') {
                        layer.alert(data.info);
                    } else {
                        layer.alert(data.result);
                    }
                }
            }
        });
    }

    //上传反面图片
    function upload_two() {
        two_pic='';
        var tourl = '<{$SRVER_NAME}>/admin.php/Knowledge/uploadimg';
        $.ajaxFileUpload({
            url: tourl,//需要链接到服务器地址
            secureuri: false,
            fileElementId: 'two',//文件选择框的id属性file的id
            dataType: 'json',
            success: function (data) {
                if (data.code == '1001') {
                    two_pic=data.result;
                    $('#img2').empty();
                        var html = '<img  style="width:150px" src="' + two_pic + '" />';
                        $('#img2').append(html);
                } else {
                    if (data.status == '0') {
                        layer.alert(data.info);
                    } else {
                        layer.alert(data.result);
                    }
                }
            }
        });
    }

    //上传反面图片
    function upload_thr() {

        thr_pic='';
        var tourl = '<{$SRVER_NAME}>/admin.php/Knowledge/uploadimg';
        $.ajaxFileUpload({
            url: tourl,//需要链接到服务器地址
            secureuri: false,
            fileElementId: 'three',//文件选择框的id属性file的id
            dataType: 'json',
            success: function (data) {
                if (data.code == '1001') {
                    thr_pic=data.result;
                    $('#img3').empty();
                        var html = '<img  style="width:150px" src="' + thr_pic + '" />';
                        $('#img3').append(html);
                } else {
                    if (data.status == '0') {
                        layer.alert(data.info);
                    } else {
                        layer.alert(data.result);
                    }
                }
            }
        });
    }

    function update_photo() {

        var index = layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        });



        var url="<{$SRVER_NAME}>/admin.php/UserInfo/update_workpic";
        if(one_pic=='' && two_pic=='' &&  thr_pic==''  ){
            layer.alert("没有图片", {title: '提示框', icon: 3});
            layer.close(index);
            return false;
        }
//        console.log('6666666',one_pic+"0000"+two_pic+"000"+thr_pic);
        layer.alert("确定修改", {title: '提示框', icon: 3}, function () {
            $.post(url, {vid: vid, one: one_pic, two: two_pic,thr:thr_pic}, function (data) {
                if (data.code == "1001") {
                    var test = layer.alert(data.result, {title: '提示框', icon: 1}, function (index) {
                        var index1 = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index1);
                        parent.location.reload();
                        }
                    );
                }
                else {
                    layer.alert(data.result, {title: '提示框', icon: 1});
                }
            });

        });

        layer.close(index);


    }

</script>

</body>


</html>